<template>
  <div id="poi-container">
    <!-- 气泡容器 -->
    <!-- <div id="pop-container" style="display: none;"> </div> -->
    <!-- 闪烁容器 -->
    <!-- <div id="flash_container" style="display: none;"></div> -->
  </div>
</template>

<script>
// import html2Canvas from 'html2canvas'
import GeoJSON from "ol/format/GeoJSON";
import { Circle as CircleStyle, Fill, Stroke, Style, Text } from "ol/style";
// import VectorImageLayer from 'ol/layer/VectorImage' // 矢量边界层使用
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import Cluster from "ol/source/Cluster";
import { transform, getTransform } from "ol/proj"; // 坐标转换
// import * as olProj from 'ol/proj'
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import LineString from "ol/geom/LineString";
import Polygon from "ol/geom/Polygon";
import Circle from "ol/geom/Circle";

import Overlay from "ol/Overlay";
// 引入功能组件
import mapStyle from "./common/mapStyle.js"; // 样式功能
// import mapFlash from './common/mapFlash.js' // 闪烁
import POIExt from "./layers/poiExt.js";

export default {
  mixins: [mapStyle, POIExt], //, mapFlash
  data() {
    return {
      oMap: null, // 地图对象
      sSRS: "EPSG:4326", // 空间参照系（Spatial Reference System)；表示数据的坐标系，和地图用的RCS不是同一个
      poiSource: null, // Feature层对应的资源（由于有Cluster）
      FeatureLayer: null, // POI层，所有操作在此组件中完成，故放此处
      aStyleList: null, // 父类定义的样式列表，POI需要使用，所以初始化时引入！
      sIconType: "standard", // 引入mapStyle.js会混入此变量，cardMap也会引入此变量；两者又相同。
      bUseCluster: false, // 启用聚集（默认关闭）
      bUpdating: false, // cluster 数据更新中
      iDistance: 80, // 聚集的合并距离
    };
  },
  watch: {
    // watch
  },
  mounted() {
    // mounted
  },
  methods: {
    /**
     * @description 初始化POI图层(创建vectorLayer)并添加到地图中显示
     * @param oParentMap {Object} 地图实例，新建的POI层添加到此地图中;(父组件提供)
     * @return null
     */
    initPOILayer(oParentMap, aMapStyleList, sMapIconType) {
      this.oMap = oParentMap;
      this.aStyleList = aMapStyleList || this.$parent.aStyleList;
      this.sIconType = sMapIconType || this.$parent.sIconType;
      // 创建POI资源（有则清空，没有则创建）
      if (this.poiSource) {
        this.poiSource.clear();
      } else {
        this.poiSource = new VectorSource();
      }
      if (this.bUseCluster) {
        const clusterSource = new Cluster({
          distance: parseInt(this.iDistance, 10), // distance.value
          source: this.poiSource,
        });
        // 创建图层
        this.FeatureLayer = new VectorLayer({
          // ol.layer.Vector
          source: clusterSource,
          style: (feature) => {
            return this.setClusterStyle(feature);
          },
        });
        console.log(this.poiSource === this.FeatureLayer.getSource().source);
        clusterSource.on("change", () => {
          // feature发生变化时调用 change
          if (this.bUpdating) {
            return; // 如果是重新Cluster中的feature，不做处理
          }
          // console.log(clusterSource.getFeatures().length)
          const aNewFeatures = []; // 从新分析构成的feature
          // 处理cluster中所有Feature
          const ClusterFeatures = clusterSource.getFeatures();
          // console.log(ClusterFeatures)
          const iNum = ClusterFeatures.length;
          for (let i = 0; i < iNum; i++) {
            const aTypeArray = [];
            // console.log(ClusterFeatures[i].get('features'))
            const aFeatureList = ClusterFeatures[i].get("features");
            for (let j = 0; j < aFeatureList.length; j++) {
              const oFeature = aFeatureList[j]; // 获取一个原始feature进行处理
              // console.log(oFeature.get('dType'))
              if (aTypeArray[oFeature.get("dType")]) {
                // 如果有指定类型的数组，直接添加
                aTypeArray[oFeature.get("dType")].push([oFeature]);
              } else {
                // 如果没有直接创建一个
                aTypeArray[oFeature.get("dType")] = [oFeature];
              }
            }
            // console.log(aNewFeatures)
            // this.FeatureLayer.getSource().clear()
            // this.FeatureLayer.getSource().removeFeature(aFeatureList[i])
            // 需要更新Cluster中的feature
            // setTimeout(() => {
            //   clusterSource.clear()
            // }, 20000)
            // 根据poi类型重新生成新feature
            this.rebuildClusterFeature(aTypeArray, aNewFeatures);
            // console.log(aNewFeatures.length)
          }
          // 数据更新
          if (aNewFeatures.length > 0) {
            this.bUpdating = true; // 禁止change更新
            clusterSource.clear();
            clusterSource.addFeatures(aNewFeatures);
            this.bUpdating = false; // 回复change更新
          }
        });
      } else {
        // 需要一个vector的layer来放置图标
        this.FeatureLayer = new VectorLayer({
          // ol.layer.Vector
          // source: new VectorSource() // ol.source.Vector()
          source: this.poiSource,
        });
      }
      this.FeatureLayer.set("name", "poiLayer");
      this.oMap.addLayer(this.FeatureLayer);
      // 调整层级关系
      this.FeatureLayer.setZIndex(11);
    },

    /**
     * @description 设置Cluster的样式
     * @param {Object} oFeature Cluster的feature
     * @return null
     */
    setClusterStyle(oFeature) {
      const features = oFeature.get("features");
      let style;
      const size = features.length;
      if (size > 1) {
        style = new Style({
          image: new CircleStyle({
            radius: 18,
            stroke: new Stroke({
              color: "#fff",
            }),
            fill: new Fill({
              color: "#3399CC",
            }),
          }),
          text: new Text({
            font: "15px sans-serif",
            text: size.toString(),
            fill: new Fill({
              color: "#fff",
            }),
          }),
        });
      } else {
        const originalFeature = oFeature.get("features")[0];
        // style = createEarthquakeStyle(originalFeature)
        return originalFeature.getStyle();
      }
      return style;
    },

    /**
     * @description 设置Cluster使用的distance
     * @param {INt} iDistance 像素距离
     * @return null
     */
    setClusterDistance(iDistance) {
      this.distance = iDistance;
    },
    getClusterDistance() {
      return this.distance;
    },

    /**
     * @description 根据需要关闭Cluster计算，显示全部详细Features
     * @param {INt} iLevel 当前级别
     * @param {Int} iThreshold 指定的开关Cluster阀值
     * @return null
     */
    updateClusterSwitch(iLevel, iThreshold) {
      if (!this.bUseCluster) return; // 没有启用Cluster不做处理
      // console.log(iLevel, iThreshold)
      // console.log(iLevel >= iThreshold)
      if (iLevel >= iThreshold) {
        if (this.FeatureLayer.getSource().getDistance() !== 0) {
          this.FeatureLayer.getSource().setDistance(0);
          // this.FeatureLayer.getSource().clear()
          // this.FeatureLayer.getSource().addFeatures(this.poiSource.getFeatures())
        }
      } else {
        if (this.FeatureLayer.getSource().getDistance() !== this.iDistance) {
          this.FeatureLayer.getSource().setDistance(this.iDistance);
        }
      }
      /* // 处理cluster中所有Feature ---- 以下部分移动到change事件处理
      const aNewFeatures = [] // 从新分析构成的feature
      const ClusterFeatures = this.FeatureLayer.getSource().getFeatures()
      const iNum = ClusterFeatures.length
      for (let i = 0; i < iNum; i++) {
        const aTypeArray = []
        // console.log(ClusterFeatures[i].get('features'))
        const aFeatureList = ClusterFeatures[i].get('features')
        if (!aFeatureList) continue
        for (let j = 0; j < aFeatureList.length; j++) {
          const oFeature = aFeatureList[j] // 获取一个原始feature进行处理
          // console.log(oFeature.get('dType'))
          if (aTypeArray[oFeature.get('dType')]) { // 如果有指定类型的数组，直接添加
            aTypeArray[oFeature.get('dType')].push([oFeature])
          } else { // 如果没有直接创建一个
            aTypeArray[oFeature.get('dType')] = [oFeature]
          }
        }
        // console.log(aTypeArray)
        this.rebuildClusterFeature(aTypeArray, aNewFeatures)
        // this.FeatureLayer.getSource().clear()
        // this.FeatureLayer.getSource().removeFeature(aFeatureList[i])
        // 需要更新Cluster中的feature
      }

      console.log(aNewFeatures)
      if (aNewFeatures.length > 0) {
        this.FeatureLayer.getSource().clear()
        this.FeatureLayer.getSource().addFeatures(aNewFeatures)
      }
      */
    },

    /**
     * @description 根据Cluster中的features重新更新Cluster显示
     * @param {Arrayt} aTypeArray 要处理的关联数组,结构类似：arr[医疗机构:array（1），警报器：array（3）]
     * @return null
     */
    rebuildClusterFeature(aTypeArray, aSaveOutput) {
      for (const k in aTypeArray) {
        // console.log(k, aTypeArray[k], aTypeArray[k].length)
        const aInnerFeatureLs = aTypeArray[k];
        const oFeature = aInnerFeatureLs[0].clone();
        oFeature.setId(aInnerFeatureLs[0].getId());
        if (aInnerFeatureLs.length > 1) {
          oFeature.set("Bubble", null);
          // console.log(oFeature.get('Bubble'))
          const oStyle = oFeature.getStyle().clone();
          const size = aInnerFeatureLs.length;
          oStyle.setText(
            new Text({
              font: "15px Microsoft YaHei", // sans-serif',
              text: size.toString(),
              fill: new Fill({
                color: "#fff",
              }),
              stroke: new Stroke({
                color: "#f00",
                width: 3,
              }),
            })
          );
          oFeature.setStyle(oStyle);
        }
        aSaveOutput.push(oFeature);
        // console.log(aSaveOutput.length)
      }
      // console.log(aSaveOutput)
    },

    /**
     * @description 销毁POI层；（一般不需要删除POI层，只是提供一个方法）
     * @param null
     * @return null
     */
    destroyPOILayer() {
      if (this.FeatureLayer) {
        // const poiSource = this.FeatureLayer.getSource()
        // poiSource.clear()
        if (this.poiSource) {
          this.poiSource.clear();
        }
        // 其他内容是否也要销毁？气泡，详情,闪烁
        this.oMap.removeLayer(this.FeatureLayer);
      }
    },

    /**
     * @description 清空POI数据
     * @param  null
     * @return null
     */
    clearPOIData() {
      // 清空POI数据
      // if (this.FeatureLayer) {
      //   const poiSource = this.FeatureLayer.getSource()
      //   poiSource.clear()
      // }
      if (this.poiSource) {
        this.poiSource.clear();
      }

      // 清除气泡及详情信息（需要相应模块支持！）
      // 清空详情信息
      // 删除热力图 和 动画层数据？
    },

    /**
     * @description 清空POI图层中的全部数据
     * @param  null
     * @return null
     */
    clearAllData() {
      this.clearPOIData();
      // 清除气泡及详情信息（需要相应模块支持！）
      // 清空详情信息
      // 删除热力图 和 动画层数据？
    },

    /**
     * @description 切换POI层的样式（是否使用Cluster）
     * @param  {boolean} bCleanData 是否清空数据，默认不删除数据
     * @return null
     */
    togglePOILayerType(bCleanData = false) {
      if (bCleanData) {
        this.clearPOIData(); // 清空数据this.poiSource
      }
      if (this.bUseCluster) {
        // 删除原有的feature层，创建新的图层
        this.FeatureLayer.getSource().clear();
        if (this.FeatureLayer) {
          this.oMap.removeLayer(this.FeatureLayer);
        }
        // 创建新的图层
        this.FeatureLayer = new VectorLayer({
          source: this.poiSource,
        });
      } else {
        // 删除原有的feature层
        if (this.FeatureLayer) {
          this.oMap.removeLayer(this.FeatureLayer);
        }
        // 创建新的图层 --------------------
        const clusterSource = new Cluster({
          distance: parseInt(this.iDistance, 10), // 新的Cluster层资源
          source: this.poiSource,
        });
        // 创建图层
        this.FeatureLayer = new VectorLayer({
          // ol.layer.Vector
          source: clusterSource,
          style: (feature) => {
            return this.setClusterStyle(feature);
          },
        });
        clusterSource.on("change", () => {
          // feature发生变化时调用 change
          if (this.bUpdating) {
            return; // 如果是重新Cluster中的feature，不做处理
          }
          // console.log(clusterSource.getFeatures().length)
          const aNewFeatures = []; // 从新分析构成的feature
          // 处理cluster中所有Feature
          const ClusterFeatures = clusterSource.getFeatures();
          // console.log(ClusterFeatures)
          const iNum = ClusterFeatures.length;
          for (let i = 0; i < iNum; i++) {
            const aTypeArray = [];
            // console.log(ClusterFeatures[i].get('features'))
            const aFeatureList = ClusterFeatures[i].get("features");
            for (let j = 0; j < aFeatureList.length; j++) {
              const oFeature = aFeatureList[j]; // 获取一个原始feature进行处理
              // console.log(oFeature.get('dType'))
              if (aTypeArray[oFeature.get("dType")]) {
                // 如果有指定类型的数组，直接添加
                aTypeArray[oFeature.get("dType")].push([oFeature]);
              } else {
                // 如果没有直接创建一个
                aTypeArray[oFeature.get("dType")] = [oFeature];
              }
            }
            this.rebuildClusterFeature(aTypeArray, aNewFeatures);
          }
          // 数据更新
          if (aNewFeatures.length > 0) {
            this.bUpdating = true; // 禁止change更新
            clusterSource.clear();
            clusterSource.addFeatures(aNewFeatures);
            this.bUpdating = false; // 回复change更新
          }
        });
      }
      this.FeatureLayer.set("name", "poiLayer");
      this.oMap.addLayer(this.FeatureLayer);
      // 调整层级关系
      this.FeatureLayer.setZIndex(11);
      this.bUseCluster = !this.bUseCluster;
    },

    /**
     * @description 获取当前Cluster使用标志位
     * @param  null
     * @return this.bUseCluster
     */
    getUseCluster() {
      return this.bUseCluster;
    },
    /**
     * @description 设置当前Cluster使用标志位
     * @param  {boolean} isUseCluster 标志设置
     * @return
     */
    setUseCluster(isUseCluster) {
      this.bUseCluster = isUseCluster; // 启用聚集（默认关闭）
    },

    /**
     * @description 设置iDistance融合距离
     * @param  {Int} iDistancePixel 距离像素长度
     * @return
     */
    setDistance(iDistancePixel) {
      if (this.iDistance === iDistancePixel) {
        return;
      } else {
        this.iDistance = iDistancePixel;
      }
      if (this.bUseCluster && this.FeatureLayer) {
        this.FeatureLayer.getSource().setDistance(iDistancePixel);
      }
    },
    /**
     * @description 获取Feature的样式
     * @param oStyleData {Object} 包含样式数据的对象
     * @return {Object} 获取到的样式
     */
    getPOIStyle(oStyleData) {
      // 获取样式id--名称
      let sStyleID = oStyleData.styleid;
      if (sStyleID) {
        // 如果有ID名称，使用它来
        if (this.aStyleList[sStyleID]) {
          return this.aStyleList[sStyleID]; // 样式已经存在，直接返回使用
        } else {
          // 创建样式
          this.addStyle2StyleList(oStyleData, sStyleID, this.aStyleList); // mapStyle.js (样式数据，样式名称，样式列表)
          return this.aStyleList[sStyleID];
        }
      } else if (oStyleData.icon) {
        // 数据中没有styleid，但有icon类型有样式列表
        sStyleID = oStyleData.icon.src;
        // 如果样式在样式列表中不存在，需要创建样式
        if (this.aStyleList[sStyleID]) {
          // 样式已经存在，直接返回使用 // oStyleData.icon.src
          return this.aStyleList[sStyleID]; // oStyleData.icon.src
        } else {
          // 创建样式
          this.addStyle2StyleList(oStyleData, sStyleID, this.aStyleList); // mapStyle.js (样式数据，样式名称，样式列表)  // oStyleData.icon.src
          return this.aStyleList[sStyleID]; // oStyleData.icon.src
        }
      } else {
        // 如果样式名称（sStyleID）和icon类型都不存在，不放人样式列表
        const oNewStyle = this.createStyle(oStyleData);
        // instStyle2StyleList (oNewStyle, sStyleID, this.aStyleList)
        return oNewStyle;
      }
    },

    /**
     * @description 创建Feature并添加套POI图层（创建一个Feature）
     * @param oSource {Object} 用来创建feature的一个geojson数据;
     * @param sRCS {String} 表示地图使用的坐标系,如：EPSG:3857
     * @return null
     */
    createFeature(oSource, sRCS) {
      // 获取当前系统投影
      let poiCoord = null; // 此为POI的坐标
      let poiFeature = null; // 要创建的Faeture
      // 获取视图投影(当前环境使用的),用sRCS 替代
      // const sViewProj = this.oMap.getView().getProjection()
      // 获取数据通用属性
      const bIsFlash = oSource.properties.isFlash || false;
      const bIsPop = oSource.properties.isPop || false;
      const oBubble = oSource.properties.Bubble || null;
      const dClass = oSource.properties.dClass || null; // 保留字段
      // 类型字段（新添加，原来所有Feature层创建的都是POI类型，现在可以设置了）
      // const sExt = oSource.properties.ext || 'POI' 由ext方法实现，此盘本不变

      // POI为Point(image, circle) ?Text 要单独处理啊吗？（文字都是不同的！！）
      if (oSource.geometry.type === "Point") {
        // Point类型顶点
        poiCoord = oSource.geometry.coordinates; // 获得顶点信息
        // console.log(sViewProj !== this.sSRS) // 当前坐标和数据坐标 是否相同
        if (sRCS !== this.sSRS) {
          // 从数据库中获取POI使用'EPSG:4326'
          // poiCoord = proj.transform(poiCoord, this.sSRS, sViewProj)
          poiCoord = transform(poiCoord, this.sSRS, sRCS); // 坐标转换
          // console.log(poiCoord)
        }
        // 生成Poitn的Feature
        poiFeature = new Feature({
          // ol.Feature
          geometry: new Point(poiCoord), // ol.geom.Point
          type: "POI", // add for select
          dType: oSource.properties.dType, // 类型：如'指挥机构'  改subclass
          iFlash: bIsFlash,
          iPop: bIsPop,
          dClass: dClass,
          // name: xItem.poiName, // title:"标题world",
          // value: xItem.value,
          Bubble: oBubble,
        });

        // poiFeature = this.FeatureLayer.getSource().addFeature(oSource)
        poiFeature.setId(oSource.properties.id);
        // console.log(this.getPOIStyle (oSource.properties))
        poiFeature.setStyle(this.getPOIStyle(oSource.properties));
        // this.FeatureLayer.getSource().addFeature(poiFeature)
        this.poiSource.addFeature(poiFeature);
      }
      // 处理线（LineString）
      if (oSource.geometry.type === "LineString") {
        // const LineCoord = oSource.geometry.coordinates
        poiCoord = oSource.geometry.coordinates;
        const geometry = new LineString(poiCoord);
        if (sRCS !== this.sSRS) {
          // geometry.applyTransform(getTransform('EPSG:4326', sRCS))
          geometry.applyTransform(getTransform(this.sSRS, sRCS));
        }

        // 创建lineSting Feature
        poiFeature = new Feature({
          // ol.Feature
          geometry: geometry, // ol.geom.lineSting
          type: "POI", // add for select
          dType: oSource.properties.dType, // 类型：如'指挥机构'  #由subclass改
          iFlash: bIsFlash,
          dClass: dClass,
          // name: xItem.poiName, // title:"标题world",
          // value: xItem.value,
          Bubble: oBubble,
        });

        // poiFeature = this.FeatureLayer.getSource().addFeature(oSource)
        poiFeature.setId(oSource.properties.id);
        // console.log(this.getPOIStyle (oSource.properties))
        poiFeature.setStyle(this.getPOIStyle(oSource.properties));
        // this.FeatureLayer.getSource().addFeature(poiFeature)
        this.poiSource.addFeature(poiFeature);
      }
      // 处理多边形（polygon）数据
      if (oSource.geometry.type === "Polygon") {
        // 获取多边形顶点信息
        poiCoord = oSource.geometry.coordinates;
        const geometry = new Polygon(poiCoord);
        if (sRCS !== this.sSRS) {
          // geometry.applyTransform(getTransform('EPSG:4326', sRCS)) // ol.proj.getTransform
          geometry.applyTransform(getTransform(this.sSRS, sRCS));
          // console.log(geometry.getCoordinates())
        }
        // 创建多边形 Feature
        poiFeature = new Feature({
          // ol.Feature
          geometry: geometry, // ol.geom.lineSting
          type: "POI", // add for select
          dType: oSource.properties.dType, // 类型：如'指挥机构'  #由subclass改
          iFlash: bIsFlash,
          dClass: dClass,
          // name: xItem.poiName, // title:"标题world",
          // value: xItem.value,
          Bubble: oBubble,
        });

        // poiFeature = this.FeatureLayer.getSource().addFeature(oSource)
        poiFeature.setId(oSource.properties.id);
        // console.log(this.getPOIStyle (oSource.properties))
        poiFeature.setStyle(this.getPOIStyle(oSource.properties));
        // this.FeatureLayer.getSource().addFeature(poiFeature)
        this.poiSource.addFeature(poiFeature);
      }
      // 处理圆（circle）数据
      console.log(oSource.geometry.type);
      if (oSource.geometry.type === "Circle") {
        // 获取圆心坐标
        poiCoord = oSource.geometry.coordinates;
        const geometry = new Circle(
          transform(poiCoord, this.sSRS, "EPSG:3857"),
          oSource.geometry.radius
        ); // 数据默认坐标系为EPSG4326，需要先转成EPSG3857，使用半径（米）创建圆形POI
        // const geometry = new Circle(transform(poiCoord, 'EPSG:4326', 'EPSG:3857'), oSource.geometry.radius) // proj.transform
        // 圆形需要将'EPSG:3857'坐标系，转换成当前地图坐标系sRCS
        geometry.transform("EPSG:3857", sRCS);
        // 创建Circle
        poiFeature = new Feature({
          // ol.Feature
          geometry: geometry, // ol.geom.lineSting
          type: "POI", // add for select
          dType: oSource.properties.dType, // 类型：如'指挥机构'  #由subclass改
          iFlash: bIsFlash,
          dClass: dClass,
          // name: xItem.poiName, // title:"标题world",
          // value: xItem.value,
          Bubble: oBubble,
        });
        // 设置featrue的id
        poiFeature.setId(oSource.properties.id);
        poiFeature.setStyle(this.getPOIStyle(oSource.properties)); // 样式设置
        // this.FeatureLayer.getSource().addFeature(poiFeature)
        this.poiSource.addFeature(poiFeature);
      }
    },

    /**
     * @description 从给定的geojson数据中获取所有的feature
     * @param oSource {Object} 给出的geojson资源数据 -- FeatureCollection
     * @return null
     */
    readFeatures(oSource) {
      // const sourceProj = this.oMap.getView().getProjection()
      // let bIsConv = false // 是否需要坐标转换，从数据库中获取的数据一般为EPSG:4326
      // if (sourceProj !== 'EPSG:4326') { // 从数据库中获取POI使用'EPSG:4326'；后续可能变更
      //   bIsConvert = true
      // }
      console.log(oSource);
      // 读取解析每个Feature对象
      // const sMapRCS = this.$parent.conf.RCS
      const sMapRCS = this.oMap.getView().getProjection().getCode();
      for (let i = 0; i < oSource.features.length; i++) {
        // this.createFeature(oSource.features[i], bIsConv)
        this.createFeature(oSource.features[i], sMapRCS);
      }
    },

    /**
     * @description 显示POI数据
     * @param  null
     * @return null
     */
    showPOI(oResData) {
      if (!oResData || JSON.stringify(oResData) === "{}") {
        return; // 没有数据作处理
      }
      // console.log(oResData)
      // 数据代码不为'000000'（成功）退出
      // if (oResData.code !== '000000') return
      // 获取当前系统投影
      // let sourceProj = this.oMap.getView().getProjection()
      // console.log(sourceProj)
      // 循环数据，展示POI
      // 数据dataTypeNum,返回的POI数据，可能有个多种类型的数据[{datType1}, {dataType2}]

      const nDataTypeNum = oResData.length;
      // console.log(nDataTypeNum)
      for (let i = 0; i < nDataTypeNum; i++) {
        const oData = oResData[i]; // 获取一类数据
        if (oData.style && !(JSON.stringify(oData.style) === "{}")) {
          // 如果此类数据开头提供了样式Style，可预先导入
          // if (oData.style && oData.style.icon && JSON.stringify(oData.style.icon) !== '{}') { // 目前只预存icon的图片样式，其他类型样式不好统一
          // 如果样式在样式列表中不存在，需要创建样式style':{ 'icon': {'sStyleID':'styleName', 'src': 'X01气泡'}  }
          this.getPOIStyle(oData.style);
        }
        // 绘制图标
        const oGeoJson = oData.geojsonfeatures; // 一个数据类型的geojson数据信息
        if (oGeoJson.type === "FeatureCollection") {
          // 处理Feature集合
          console.log(oGeoJson);
          this.readFeatures(oGeoJson);
        }
      }
      // 检查
      // console.log(this.FeatureLayer.getSource().getFeatures())
      console.log(this.poiSource.getFeatures());
    },

    // // 创建气泡 （此方法为测试）
    // createBubble (oFeature) { // xMap, basePoint, oFeature, showFlags) {
    //   // let overlayID = oFeature.getId() // 气泡ID，与POI本身ID相同
    //   // let popDiv = document.getElementById(overlayID)
    //   // if (popDiv) return // 如果已经创建气泡，返回不在创建
    //   // let overlay = document.getElementById('pop-container') // 获取overlayer容器！
    //   // let elementDiv = document.createElement('div') // 创建新的overlay的DOM元素
    //   // elementDiv.className = 'ol-popup'
    //   // elementDiv.id = overlayID
    //   // elementDiv.setAttribute('pID', overlayID)
    //   // elementDiv.style.zIndex = parseInt( String(new Date().getTime()).substr(5,5) )
    //   // // 创建关闭按钮
    //   // let elementA = document.createElement('i')
    //   // elementA.className = 'ol-popup-closer'
    //   // // 添加关闭事件（未完成）
    //   // elementDiv.appendChild(elementA)

    //   // let contentDiv = document.createElement('div')
    //   // contentDiv.className = 'popup-content'

    //   // elementDiv.appendChild(contentDiv)
    //   // overlay.appendChild(elementDiv)
    //   // // 添加
    //   // let newMarker = new Overlay({
    //   //   id: overlayID,
    //   //   position: feature.getGeometry().getCoordinates(), // basePoint,
    //   //   positioning: posiPoint,
    //   //   element: elementDiv,
    //   //   stopEvent: false
    //   // })
    //   // this.iMap.addOverlay(newMarker)
    //   var popup = new Overlay({
    //     element: document.getElementById('popup')
    //   })
    //   popup.setPosition(oFeature.getGeometry().getCoordinates())
    //   this.oMap.addOverlay(popup)
    // }

    // 当前方法
  },
};
</script>

<style lang="scss">
.css_animation {
  height: 50px;
  width: 50px;
  border-radius: 25px;
  background: rgba(255, 0, 0, 0.9);
  transform: scale(0);
  animation: cssflash 3s;
  animation-iteration-count: infinite;
}

.marker {
  background-position: center center;
  width: 20px;
  height: 20px;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
  p {
    background-color: rgba(250, 0, 0, 0.2);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: myfirst 1.4s infinite;
    box-shadow: 0px 0px 2px #f00;
  }
}

@keyframes cssflash {
  to {
    transform: scale(2);
    background: rgba(0, 0, 0, 0);
  }
}

@keyframes myfirst {
  to {
    transform: scale(8);
  }
}
</style>
